<template>
  <div class="info-wrapper">
    <div class="info-w" @click="goback">
      <div class="info-c">
        <div class="close">
          <i class="iconfont icon-fanhui1"></i>
        </div>
        <span class="title">{{showTitle}}</span>
      </div>
    </div>
    <div class="info-content">
      <div class="info-tab">
        <div class="tab-item" @click="gobase" :class="{active: this.showBase}"><span>基本信息</span></div>
        <div class="tab-item" @click="gohouse" :class="{active: this.showhouse}"><span>房屋信息</span></div>
        <div class="tab-item" @click="gorent" :class="{active: this.showRent}"><span>用途信息</span></div>
        <div class="tab-item" @click="gomoney" :class="{active: this.showMoney}"><span>租金管理</span></div>
        <div class="tab-item" @click="gomend" :class="{active: this.showMend}"><span>维修信息</span></div>
      </div>

      <houseinfo handletype="2" :func="docallback" v-if="showBase"></houseinfo>
      <basehouse handletype="2" :func="docallback" v-if="showhouse"></basehouse>
      <mendinfo v-if="showMend" handletype="2"></mendinfo>
      <rentinfo v-if="showRent" handletype="2"></rentinfo>
      <rentmoney v-if="showMoney" handletype="2"></rentmoney>
    </div>
    <div class="picContent" @click="hidepic" v-show="isshowpic">
      <img :src="this.imgUrl" alt="" style="height:500px;position:relative">
    </div>
  </div>
</template>


<script type="text/ecmascript-6">
import test from '~/components/common/upload/test.vue';
import basehouse from '~/components/houseManage/basehouse.vue';
import houseinfo from '~/components/houseManage/houseinfo.vue';
import mendinfo from '~/components/houseManage/mendInfo.vue';
import rentinfo from '~/components/houseManage/rentInfo.vue';
import rentmoney from '~/components/houseManage/rentmoney.vue';

export default {
  data() {
    return {
      ts: this.newStore(),
      isshowpic: true,
      ischeckmend: true,
      ischeckrent: true,
      imgUrl: '',
      mendinfo: {},
      rentinfo: {},
      detailData: {},
      detailData2: [],
      detailData3: [],
      fileList: [],
      fileList2: [],
      dialogImageUrl: '',
      dialogVisible: false,
      certpaper: '',
      htypeattach: '',
      image1: '',
      image2: '',
      image3: '',
      image: '',
      rentagreement: '',
      rentuseattach: '',
      actureuseattach: '',
      guarantunit: '',
      value1: '',
      value2: '',
      value3: '',
      value4: '',
      hfloor: '',
      showBase: false,
      showMend: false,
      showRent: false,
      showMoney: false,
      showhouse: false,
      showTitle: '',
      inputs: [],

      htypeArr: [],
      horgArr: [],
      hstatusArr: [],
      usetypeArr: [],
      rentertypeArr: [],
      owntypeArr: [],
      renttypeArr: [],
      feetypeArr: [],
      rentstatuArr: [],
      danwei1Arr: [],
      danwei2Arr: [],
      htype: '',
      checkstatus: '',
      frompath: '',
    };
  },
  computed: {

  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      // 通过 `vm` 访问组件实例,将值传入oldUrl
      vm.frompath = from.path;
    });
  },


  created() {
    console.log(this.$route);
  },
  components: {
    test,
    houseinfo,
    mendinfo,
    rentinfo,
    rentmoney,
    basehouse,
  },
  mounted() {
    this.gobase();
  },
  methods: {
    goback() {
      this.$router.push({
        name: 'houseManage',
        query: { funcid: 204000 },
      });
    },
    docallback() {
      alert(1);
    },
    gobase() {
      this.showMend = false;
      this.showRent = false;
      this.showPoint = false;
      this.showMoney = false;
      this.showHistory = false;
      this.showhouse = false;
      this.showTitle = '基本信息';
      this.$nextTick(() => {
        this.showBase = true;
      });
    },
    gohouse() {
      this.showMend = false;
      this.showRent = false;
      this.showPoint = false;
      this.showMoney = false;
      this.showHistory = false;
      this.showBase = false;
      this.showhouse = true;
      this.showTitle = '房屋信息';
      this.$nextTick(() => {
        this.showhouse = true;
      });
    },
    gomend() {
      this.showMend = true;
      this.showBase = false;
      this.showRent = false;
      this.showPoint = false;
      this.showMoney = false;
      this.showHistory = false;
      this.showhouse = false;
      this.showTitle = '维修信息';
      this.$nextTick(() => {
        this.showMend = true;
      });
    },
    gorent() {
      this.showBase = false;
      this.showMend = false;
      this.showPoint = false;
      this.showMoney = false;
      this.showHistory = false;
      this.showTitle = '用途信息';
      this.showhouse = false;
      this.$nextTick(() => {
        this.showRent = true;
      });
    },
    gomoney() {
      this.showRent = false;
      this.showBase = false;
      this.showMend = false;
      this.showPoint = false;
      this.showHistory = false;
      this.showTitle = '租金管理';
      this.showhouse = false;
      this.$nextTick(() => {
        this.showMoney = true;
      });
    },


    showPic(name) {
      this.isshowpic = true;
      this.imgUrl = name;
    },
    hidepic() {
      this.isshowpic = false;
    },
  },
};
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  .picContent
    position: fixed;
    top 120px;
    right: 0;
    left: 0;
    margin: 0;
    margin: 0 auto;
    z-index: 5000;
    width 56%
  .avatar ul li{
  float left
  width 33%
}
  .info-wrapper .info-content .upload-btn[data-v-6b40dfc5]
    background #fff
    width 90px

  .item-info>>>.el-date-editor .el-range-separator
    padding: 0
    line-height: 22px
  .item-info >>>.el-date-editor.el-input, .el-date-editor.el-input__inner
    width: 300px
    height: 30px
  .item-info >>>.el-input__inner
    height: 30px
    border-top: 2px solid #999
    border-radius: 0
  .item-info >>>.el-input__icon
    line-height: 22px
    color: #333
  .avatar >>>.el-upload--picture-card
    width: 90px
    height: 90px
    line-height: 100px
    margin-top: 20px
  .avatar >>>.el-upload-list--picture-card .el-upload-list__item
    width: 90px
    height: 90px
    margin-top: 20px
  .upload-btn >>>.el-upload-list__item
    width 160%
  .sub-btn >>> .el-button--success
    background: #69f
    border-color: #69f
  .sub-btn >>> .el-button
    padding: 8px 20px
  .info-wrapper
    position: absolute
    left: 0
    top: 0
    width: 100%
    .info-w
      height: 50px
      line-height: 50px
      width: 100%
      background: #69f
      color: #fff
      cursor: pointer
      .info-c
        width: 1200px
        margin: 0 auto
        .close
          display: inline-block
          margin-right: 20px
          .iconfont
            font-size: 20px
        .title
          display: inline-block
          font-size: 18px
    .info-content
      width: 1200px
      min-height: 600px
      margin: 0 auto 50px
      .upload-btn
        display: inline-block
        vertical-align: top
        margin-left: 5px
        width: 80px
        height: 30px
        line-height: 30px
        text-align: center
        border-radius: 5px
        color: #fff
      .info-tab
        cursor: pointer
        border-bottom: 1px solid #ccc;
        .tab-item
          display: inline-block
          width: 120px
          height: 40px
          line-height: 40px
          text-align: center
          border: 1px solid #ccc
          margin: 15px 0 15px -1px
          background: #fff
          &.active
            background: #69f
            color: #fff
      .item-info
        position: relative
        margin-bottom: 50px
        .sub-btn
          position: absolute
          right: 190px
          top: -60px
          height: 40px
          line-height: 40px
          .save-btn, .add-btn
            display: inline-block
            margin-right: 15px
        .info-list
          margin-top: 50px
          border-top: 1px solid #ccc
          text-align: center
          .title
            padding: 30px 0
            font-weight: 600
            font-size: 18px
            color: #6699ff
          table
            text-align: center
            padding-left: 30px
            cursor: pointer
            border-collapse: collapse
            td, th
              border: 1px solid #ccc
              font-size: 14px
              color: #666
              height: 40px
            thead
              th
                font-weight: 600
                background-color: #F2F2F2
                &:nth-of-type(1)
                  width: 40px
                &:nth-of-type(2)
                  width: 120px
        .left-info, .right-info
          display: inline-block
          vertical-align: top
          width: 600px
          .item
            margin-top: 5px
            height: 30px
            line-height: 30px
            &:nth-of-type(1)
              margin-top: 15px
            &.icon
              position: relative
              .iconfont
                position: absolute
                top: 0
                right: 190px
            span
              display: inline-block
              vertical-align: top
              width: 120px
              color: #333333
              font-weight: 600
            input
              display: inline-block
              vertical-align: top
              width: 300px
              height: 30px
              border: 1px solid #ccc
              border-top: 2px solid #999
            select
              display: inline-block
              width: 300px
              height: 30px
              border: 1px solid #ccc
              border-top: 2px solid #999
              text-align: right
              &.min1
                width: 100px
              &.min2
                width: 200px
                margin-left: -1px
            &.textarea
              height: 150px
              textarea
                width: 300px
                height: 150px
                border: 1px solid #ccc
                border-top: 2px solid #999
            &.spec
              height: 70px
              span
                float: left
              .text
                display: inline-block
                input:nth-of-type(1)
                  width: 100px
                input:nth-of-type(2)
                  width: 200px
                &:nth-of-type(2)
                  margin-top: 5px
            &.spec2
              height: 30px
              .text
                display: inline-block
                input
                  display: inline-block
                  vertical-align: top
                input:nth-of-type(1)
                  width: 200px
                input:nth-of-type(2)
                  width: 100px
                select
                  display: inline-block
                  vertical-align: top
                  width: 100px
            &.spec3
              height: 70px
              span
                height: 70px
                float: left
              .text
                display: inline-block
                margin-top: 5px
                input:nth-of-type(1)
                  width: 200px
                input:nth-of-type(2)
                  width: 100px
            &.spec4
              height: 70px
              span
                float: left
                height: 70px
              input
                margin-top: 5px
            &.spec5
              .line
                display: inline-block
                vertical-align: middle
                width: 20px
                height: 1px
                background: #ccc
              .iconfont
                &:ntn-of-type(1)
                  right: 190px
                &:nth-of-type(2)
                  right: 350px
          .upload
            width: 400px
            margin-top: 15px
            text-align: center
            .avatar
              width: 400px
              height: 200px
              border: 1px solid #ccc
              margin-bottom: 15px
            .desc
              margin-bottom: 15px
            .btn
              display: inline-block
              margin-bottom: 15px
              width: 80px
              height: 30px
              line-height: 30px
              text-align: center
              border-radius: 5px
              background: #69f
              color: #fff
        &.base-info
          .right-info
            .item
              margin-top: 6px
        &.rent-info
          .right-info
            .item
              margin-top: 11px
              &:nth-of-type(1)
                margin-top: 15px
        span
          display: inline-block
          vertical-align: top
</style>
